<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
	<title>Sampler</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="icon" type="image/png" sizes="174x174" href="./favicon.png">

	<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2/webcomponents-bundle.js"></script>
	<script src="../build/Tone.js"></script>
	<script src="./js/tonejs-ui.js"></script>
</head>
<body>
	<style>
		tone-piano {
			margin-bottom: 10px;
		}
	</style>
	<tone-example>
		<tone-loader></tone-loader>

		<tone-explanation label="Sampler">
			<a href="https://tonejs.github.io/docs/Sampler" target="_blank">Tone.Sampler</a> makes it easy to create an instrument from audio samples. Pass in an object which maps the note's pitch or midi value to the url, then you can trigger the attack and release of that note like other instruments. By automatically repitching the samples, it is possible to play pitches which were not explicitly included which can save loading time.
		</tone-explanation>

		<tone-content>
			<tone-piano polyphonic></tone-piano>
			<tone-sampler collapsed></tone-sampler>
		</tone-content>
	</tone-example>

	<script type="text/javascript">
		var piano = new Tone.Sampler({
			"A0" : "A0.[mp3|ogg]",
			"C1" : "C1.[mp3|ogg]",
			"D#1" : "Ds1.[mp3|ogg]",
			"F#1" : "Fs1.[mp3|ogg]",
			"A1" : "A1.[mp3|ogg]",
			"C2" : "C2.[mp3|ogg]",
			"D#2" : "Ds2.[mp3|ogg]",
			"F#2" : "Fs2.[mp3|ogg]",
			"A2" : "A2.[mp3|ogg]",
			"C3" : "C3.[mp3|ogg]",
			"D#3" : "Ds3.[mp3|ogg]",
			"F#3" : "Fs3.[mp3|ogg]",
			"A3" : "A3.[mp3|ogg]",
			"C4" : "C4.[mp3|ogg]",
			"D#4" : "Ds4.[mp3|ogg]",
			"F#4" : "Fs4.[mp3|ogg]",
			"A4" : "A4.[mp3|ogg]",
			"C5" : "C5.[mp3|ogg]",
			"D#5" : "Ds5.[mp3|ogg]",
			"F#5" : "Fs5.[mp3|ogg]",
			"A5" : "A5.[mp3|ogg]",
			"C6" : "C6.[mp3|ogg]",
			"D#6" : "Ds6.[mp3|ogg]",
			"F#6" : "Fs6.[mp3|ogg]",
			"A6" : "A6.[mp3|ogg]",
			"C7" : "C7.[mp3|ogg]",
			"D#7" : "Ds7.[mp3|ogg]",
			"F#7" : "Fs7.[mp3|ogg]",
			"A7" : "A7.[mp3|ogg]",
			"C8" : "C8.[mp3|ogg]"
		}, {
			"release" : 1,
			"baseUrl" : "./audio/salamander/"
		}).toMaster();

		//bind the interface
		document.querySelector("tone-piano").bind(piano);
		document.querySelector("tone-sampler").bind(piano);
	</script>

</body>
</html>
